
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邀请好友</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <meta content="telephone=no" name="format-detection"/>
    <link href="__PUBLIC__/task/css/yaoqingstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<style type="text/css">
    #goodcover {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 133%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: 0.50;
        filter: alpha(opacity=80);
    }
    #code {
        width: 300px;
        height: 500px;
        background-color: #fff;
        padding: 10px;
        position: absolute;
        display: none;
        left: 45%;
        z-index: 1002;
    }
    .close1 {
        width: 280px;
        height: 30px;
    }
    #closebt {
        float: right;
    }
    #closebt img {
        width: 20px;
    }
    .goodtxt {
        text-align: center;
    }
    .goodtxt p {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #000;
        font-weight: 600;
    }
    .code-img {
        width: 300px;

        padding: 10px;
    }
    .code-img img {
        width: 260px;
    }
</style>
<script src="__PUBLIC__/task/js/jquery.min.js"></script>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:history.back();" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">邀请好友</span>
        </div>

    </header>
    <section class="aui-scrollView">
        <div class="aui-top-head">
            <div class="aui-title-bg"></div>
            <div class="aui-invite-box">
                <div class="aui-invite-title">
                    <h1>每邀请1位好友</h1>
                    <h2>立得 <em>1</em> <i>元</i></h2>
                    <p>- 被邀请新用户注册后 您既得现金 -</p>
                </div>
                <!-- <div class="aui-invite-coupon">
                    <p>额外<em>6%</em>理财收益特权</p>
                </div> -->
                <div class="aui-button">
                    <button id="ClickMe">推广海报</button>
                </div>

            </div>
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <h2>简单三步 立享权益</h2>
                </div>
            </div>
            <div class="aui-invite-box aui-invite-box-clear">
                <div class="aui-used-layout">
                    <a href="javascript:;" class="aui-grids-item">
                        <span class="aui-grids-item-img">1</span>
                                <span class="aui-grids-item-text">
                                    <p>分享活动</p>
                                    <p>给好友</p>
                                </span>
                    </a>
                    <a href="javascript:;" class="aui-grids-item">
                        <span class="aui-grids-item-img">2</span>
                                <span class="aui-grids-item-text">
                                    <p>好友接受</p>
                                    <p>邀请</p>
                                </span>
                    </a>
                    <a href="javascript:;" class="aui-grids-item">
                        <span class="aui-grids-item-img">3</span>
                                <span class="aui-grids-item-text">
                                    <p>好友登录</p>
                                    <p>完成实名认证</p>
                                </span>
                    </a>
                </div>
            </div>
            <div class="aui-invite-box aui-invite-box-clear">
                <div class="aui-flex" style="padding:0">
                    <div class="aui-flex-box">
                        <h4>邀请规则</h4>
                        <h5 style="font-size:12px;font-weight:normal;">邀请规则邀请规则邀请规则邀请规则邀请规则</h5>

                    </div>

                </div>
            </div>
            <div class="aui-footer-bg"></div>
        </div>
        <div class="aui-flex">
            <div class="aui-flex-box">
                <h6>我的邀请战绩</h6>
            </div>
        </div>
        <div class="aui-palace">
            <a href="javascript:;" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <span>0</span>
                </div>
                <div class="aui-palace-grid-text">
                    <h2>共邀请好友</h2>
                </div>
            </a>
            <!-- <a href="javascript:;" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <span>99+</span>
                </div>
                <div class="aui-palace-grid-text">
                    <h2>战绩排名</h2>
                </div>
            </a> -->
            <a href="javascript:;" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <span style="color:#f97a11">0</span>
                </div>
                <div class="aui-palace-grid-text">
                    <h2>获得奖励(元)</h2>
                </div>
            </a>
        </div>
        <!--  <div class="aui-button-btn">
             <button>查看详情</button>
         </div> -->
        <div class="divHeight"></div>
        <div class="aui-flex">
            <div class="aui-flex-box">
                <h6>排行榜</h6>
            </div>
        </div>
        <div class="aui-flex">
            <div class="aui-flex-box">
                <span>用户名</span>
            </div>
            <div class="aui-flex-box" style="text-align:right">
                <span>邀请人数</span>
            </div>
        </div>
        <!-- <div class="aui-invite-list">
            <a href="javascript:;" class="aui-flex">
                <div class="aui-user-img">
                    <img src="/static/home/mobile/images/user-002.png" alt="">
                </div>
                <div class="aui-flex-box">
                    <h4>排名:第99+</h4>
                    <h5>我</h5>
                </div>
                <div class="aui-arrow">
                    <p>0.00</p>
                </div>
            </a>
        </div> -->
        <div class="divHeight"></div>
        <div class="aui-invite-list">

            <a href="javascript:;" class="aui-flex">
                <div class="aui-user-img">
                    <img src="__PUBLIC__/task/images/15be5911c10d12bbeefbe7b7b4ef15c4.png" alt="">
                    <span class="aui-vip1"></span>
                </div>
                <div class="aui-flex-box">
                    <h4 class="aui-no1">No.1</h4>
                    <h5>183*****167</h5>
                </div>
                <div class="aui-arrow">
                    <p>3</p>
                </div>
            </a>



        </div>
    </section>
</section>


<div id="goodcover"></div>

<div id="code">
    <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="__PUBLIC__/task/images/close.gif"></a></div>
    <div class="goodtxt">
        <p>邀请好友赚钱</p>
        <p>长按保存图片~</p>
    </div>
    <div class="code-img"> <img id="ewmsrc"  src="__PUBLIC__/task/images/3499_haibao.jpg"></div>
</div>
<script>
    $(function() {
        //alert($(window).height());
        $('#ClickMe').click(function() {
            $.ajax({
                type: "POST",
                url: "/index/tasks/verificationCode",
                dataType:'json',
                data: {},
                success: function(msg){
                    $('#ewmsrc').attr('src',msg.pic);
                    $('#code').center();
                    $('#goodcover').show();
                    $('#code').fadeIn();

                    }
                });
        });
        $('#closebt').click(function() {
            $('#code').hide();
            $('#goodcover').hide();
        });
        $('#goodcover').click(function() {
            $('#code').hide();
            $('#goodcover').hide();
        });
        /*var val=$(window).height();
         var codeheight=$("#code").height();
         var topheight=(val-codeheight)/2;
         $('#code').css('top',topheight);*/
        jQuery.fn.center = function(loaded) {
            var obj = this;
            body_width = parseInt($(window).width());
            body_height = parseInt($(window).height());
            block_width = parseInt(obj.width());
            block_height = parseInt(obj.height());

            left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
            if (body_width < block_width) {
                left_position = 0 + $(window).scrollLeft();
            };

            top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
            if (body_height < block_height) {
                top_position = 0 + $(window).scrollTop();
            };

            if (!loaded) {

                obj.css({
                    'position': 'absolute'
                });
                obj.css({
                    'top': ($(window).height() - $('#code').height()) * 0.5,
                    'left': left_position
                });
                $(window).bind('resize', function() {
                    obj.center(!loaded);
                });
                $(window).bind('scroll', function() {
                    obj.center(!loaded);
                });

            } else {
                obj.stop();
                obj.css({
                    'position': 'absolute'
                });
                obj.animate({
                    'top': top_position
                }, 200, 'linear');
            }
        }

    })
</script>
</body>
</html>
